<template>
  <!-- el-dialog
   el-dialog
       visible:是否显示弹框
       title:标题
       width:设置宽度
       slot="title/default/footer"

bus传值
1：Vue.prototype.$bus=new Vue()
2:监听： this.$bus.$on(事件名,(参数值)=>{})
3:触发：this.$bus.$emit('事件名',实参)
4:销毁：this.$bus.$off('事件名')

.sync:数据双向绑定

-->
  <el-dialog :visible.sync="isShow" :title="title">
    <el-form ref="form" label-width="120px" :model="form" :rules="rules">
      <el-form-item prop="name" label="部门名称">
        <el-input v-model.trim="form.name" />
      </el-form-item>
      <el-form-item prop="code" label="部门编码">
        <el-input v-model.trim="form.code" />
      </el-form-item>
      <el-form-item prop="manager" label="部门负责人">
        <el-select v-model="form.manager" @focus="focusEvent">
          <el-option
            v-for="i in userList"
            :key="i.id"
            :label="i.username"
            :value="i.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="introduce" label="部门介绍">
        <el-input v-model="form.introduce" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="text-align: center">
        <el-button @click="closeEvent">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import {
  sysUserSimple,
  companyDepartmentPost,
  companyDepartmentPut
} from '@/api/departments.js'
export default {
  props: {
    initTreeData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      mode: 'add', // add:新增   edit:编辑  草稿   模版。。。。
      isShow: false,
      itemData: '',
      userList: [],
      form: {
        name: '', //	string	非必须		部门名称
        code: '', //	string	非必须		部门编码，同级部门不可重复
        manager: '', //	string	非必须		负责人名称
        introduce: '', //	string	非必须		介绍
        pid: '' //	string	非必须		父级部门ID
      },
      rules: {
        name: [
          { required: true, message: '必填', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              const tempArr = this.initTreeData.filter((item) => {
                if (this.mode === 'add') {
                  return item.pid === this.itemData.id
                } else if (this.mode === 'edit') {
                  return (
                    item.pid === this.itemData.pid &&
                    item.id !== this.itemData.id
                  )
                }
              })
              const bol = tempArr.some((item) => {
                return item.name === value
              })
              bol ? callback(new Error('部门名称重名:' + value)) : callback()

              // if (this.mode === 'add') {
              //   //  添加的部门不能和同级部门(当前点击项的子集)重名
              //   // 1:拿到点击项的子集数据
              //   // initTreeData:[{id,pid...}]
              //   // itemData：{id===子集的pid}
              //   const tempArr = this.initTreeData.filter((item) => {
              //     return item.pid === this.itemData.id
              //   })
              //   // console.log('tempArr', tempArr)
              //   // 验证是否重名    [{name:1},{name:2}...]===>是否有name=2
              //   // some:数组中只要有一个项返回true,它的返回值就是true
              //   // 存在：验证不通过  不存在：通过
              //   const bol = tempArr.some((item) => {
              //     return item.name === value
              //   })
              //   bol ? callback(new Error('部门名称重名:' + value)) : callback()
              // } else if (this.mode === 'edit') {
              //   // 找出当前点击兄弟部门（pid相同），排除自己，不可重名，
              //   const tempArr = this.initTreeData.filter((item) => {
              //     return (
              //       item.pid === this.itemData.pid &&
              //       item.id !== this.itemData.id
              //     )
              //   })
              //   const bol = tempArr.some((item) => {
              //     return item.name === value
              //   })
              //   bol ? callback(new Error('部门名称重名:' + value)) : callback()
              // }
            }
          }
        ], //	string	非必须		部门名称
        code: [
          { required: true, message: '必填', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              // 不能与任意部门的code重复
              const bol = this.initTreeData.some((item) => {
                if (this.mode === 'add') {
                  return item.code === value
                } else if (this.mode === 'edit') {
                  return item.code === value && item.id !== this.itemData.id
                }
              })
              // true:验证失败  false:验证成功
              bol ? callback(new Error('部门编码重复')) : callback()
            }
          }
        ], //	string	非必须		部门编码，同级部门不可重复
        manager: [{ required: true, message: '必填', trigger: 'change' }], //	string	非必须		负责人名称
        introduce: [{ required: true, message: '必填', trigger: 'change' }] //	string	非必须		介绍
      }
    }
  },
  // 计算属性：依赖一个或者多个值产生一个新的值
  computed: {
    title() {
      return {
        add: '新增部门',
        edit: '编辑部门'
      }[this.mode]
    }
  },
  watch: {
    isShow(newVal) {
      if (!newVal) {
        this.$refs.form.resetFields()
        this.form = {
          name: '', //	string	非必须		部门名称
          code: '', //	string	非必须		部门编码，同级部门不可重复
          manager: '', //	string	非必须		负责人名称
          introduce: '', //	string	非必须		介绍
          pid: '' //	string	非必须		父级部门ID
        }
      }
    }
  },
  mounted() {
    //   bus监听
    this.$bus.$on('showDialog', (bol, itemData, mode) => {
      this.itemData = itemData
      this.form.pid = itemData.id
      this.mode = mode
      /*
      let obj={a:10}
      let form=obj
      form.a=20
      obj.a=20
      */
      if (mode === 'edit') {
        // itemData={id,.....}
        this.form = JSON.parse(JSON.stringify(itemData))
      }
      // console.log(111)
      this.isShow = bol
      // 渲染表单
    })
  },

  beforeDestroy() {
    this.$bus.$off('showDialog')
  },
  methods: {
    // 关闭弹框时清空数据与表单验证
    closeEvent() {
      this.isShow = false
      // 还原数据与表单验证

      // 强行还原数据
      // for (const key in this.form) {
      //   this.form[key] = ''
      // }
      this.$refs.form.resetFields()
      this.form = {
        name: '', //	string	非必须		部门名称
        code: '', //	string	非必须		部门编码，同级部门不可重复
        manager: '', //	string	非必须		负责人名称
        introduce: '', //	string	非必须		介绍
        pid: '' //	string	非必须		父级部门ID
      }
      // this.$nextTick(() => {
      //   this.$refs.form.clearValidate()
      // })
    },
    // 获取员工列表
    async focusEvent() {
      if (this.userList.length === 0) {
        const res = await sysUserSimple()
        this.userList = res.data
        // console.log(res)
      }
    },
    // 确定点击
    submit() {
      this.$refs.form.validate(async(result) => {
        if (result) {
          if (this.mode === 'add') {
            await companyDepartmentPost(this.form)
            this.$message.success('新增成功')
          } else if (this.mode === 'edit') {
            await companyDepartmentPut(this.form)
            this.$message.success('编辑成功')
          }
          this.isShow = false
          this.$emit('getData')
        }
      })
    }
  }
}
</script>
<style></style>
